<template>
  <div class="app-container">
    <!-- 会员模板查询模块 -->
    <div class="receivableSheet">
      <!-- 查询模块 -->
      <el-form ref="form"  :model="form" label-width="200px" :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="plus会员卡名称">
              <el-input v-model="form.card_name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户名称">
              <el-input v-model="form.shop_name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.check_status" placeholder="请选择">
                <el-option
                  v-for="(item,index) in reviewStatusList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商小程序分享频道展示">
              <el-select v-model="form.is_jxsapp_show" placeholder="请选择">
                <el-option
                  v-for="(item,index) in showList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="10">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
            <el-button type="primary" @click="toRoutes('plusListAdd')">添加会员卡</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="编号" width="50" align="center" />
        <el-table-column prop="name" label="plus会员卡名称" align="center" />
        <!-- <el-table-column prop="template_name" label="会员卡模板" /> -->
        <el-table-column prop="template_name" label="会员卡内容" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type==2" />
            <span v-else>{{ scope.row.template_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shop_name" label="商户名称" align="center" />
        <el-table-column prop="check_time" label="提交时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.check_time | dateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="check_status_time" label="审核时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.check_status_time | dateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fake_sale_num" label="虚拟销量" align="center">
          <template slot-scope="scope">
            <el-input
              v-model.number="scope.row.fake_sale_num"
              size="mini"
              class="min_width"
              @change="handleNum(scope.row.fake_sale_num,scope.row.sale_num,scope.row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="v_top" label="置顶" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.v_top | vTopFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_jxsapp_show" label="经销商小程序分享频道展示" align="center">
          <template slot-scope="scope">
            <!--  @change="changeSwitch(scope.row.userId,scope.row.status)" -->
            <!--  && 'form1.opt'!='1' -->
            <el-switch
              v-if="scope.row.check_status == 3 && scope.row.is_on == 1"
              v-model="scope.row.is_jxsapp_show"
              :active-value="1"
              :inactive-value="0"
              @change="changeSwitch(scope.row.id,scope.row.is_jxsapp_show)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="check_status" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.check_status | checkType }}</span>
            <div>
              <el-button
                v-if="scope.row.check_status==2"
                type="text"
                @click="handleReason(scope.row.id,scope.row.check_msg)"
              >驳回原因</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <!-- <span v-if="scope.row.check_status==3 ||scope.row.check_status==2">
                                <el-button
                                    size="small"
                                    type="text"
                                    @click="toRoutes('plusListInfo',scope.row.id)"
                                >查看</el-button>
                            </span>-->
              <span v-if="scope.row.check_status==2&&scope.row.type!=2">
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListInfo',scope.row.id,scope.row.type)"
                >查看</el-button>
                <!-- v-if="scope.row.is_on!=1" -->
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListShopEdit',scope.row.id,scope.row.type)"
                >编辑</el-button>
              </span>
              <span v-if="scope.row.check_status==1">
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListInfo',scope.row.id,scope.row.type)"
                >查看</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="handleAudit(scope.row.id)"
                >审核</el-button>
              </span>
              <span v-if="scope.row.check_status==3">
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListInfo',scope.row.id,scope.row.type)"
                >查看</el-button>
                <!--    v-if="scope.row.is_on!=1" -->
                <el-button
                  v-if="scope.row.type!=2"
                  size="small"
                  type="text"
                  @click="toRoutes('plusListShopEdit',scope.row.id,scope.row.type)"
                >编辑</el-button>
                <!-- <el-button
                                    v-if="scope.row.v_top==0&&scope.row.is_on == 1"
                                    size="small"
                                    type="text"
                                    @click="handleTop(scope.row.id,1)"
                                >置顶</el-button>
                                <el-button
                                    v-if="scope.row.v_top==1&&scope.row.is_on == 1"
                                    size="small"
                                    type="text"
                                    @click="handleTop(scope.row.id,0)"
                                >取消置顶</el-button>-->
              </span>
              <!--  && scope.row.check_status == 3 -->
              <span v-if="scope.row.type==2 && scope.row.check_status == 3">
                <el-button
                  v-if="scope.row.is_on == 0"
                  size="small"
                  type="text"
                  @click="handleShelves(scope.row.id,1)"
                >上架</el-button>
                <el-button
                  v-if="scope.row.is_on == 1"
                  size="small"
                  type="text"
                  @click="handleShelves(scope.row.id,0,scope.row.name)"
                >下架</el-button>
                <el-button
                  v-if="scope.row.check_status !=1"
                  size="small"
                  type="text"
                  @click="toRoutes('plusListEdit',scope.row.id,scope.row.type)"
                >编辑</el-button>
              </span>
              <!--  && scope.row.check_status != 3 -->
              <span v-if="scope.row.type==2 && scope.row.check_status ==2">
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListInfo',scope.row.id,scope.row.type)"
                >查看</el-button>
                <el-button
                  v-if="scope.row.check_status !=1"
                  size="small"
                  type="text"
                  @click="toRoutes('plusListEdit',scope.row.id,scope.row.type)"
                >编辑</el-button>
              </span>
              <span v-if="scope.row.type==2 && scope.row.check_status !=1">
                <el-button
                  v-if="scope.row.is_on!=1"
                  size="small"
                  type="text"
                  @click="handleDelete(scope.row.id)"
                >删除</el-button>
              </span>
              <!-- <span v-else>
                <el-button
                  size="small"
                  type="text"
                  @click="toRoutes('plusListInfo',scope.row.id)"
                >查看</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="handleAudit(scope.row.id)"
                >审核</el-button>
                            </span>-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 审核弹窗 -->
    <el-dialog title="审核状态" :visible.sync="dialogFormVisible" width="30%">
      <el-form
        ref="form1"
        class="tex_center"
        :model="form1"
        :rules="rules1"
        label-width="100px"
      >
        <el-form-item label="审核" prop="opt" style="magin-left:20px">
          <el-radio-group v-model="form1.opt">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row v-if="form1.opt=='2'">
          <el-col :span="24">
            <el-form-item label="驳回原因" prop="check_msg">
              <el-input
                v-model="form1.check_msg"
                type="textarea"
                size="small"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="sure('form1')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  checkList,
  cardCheck,
  cardExport,
  isOnTop,
  dealers,
  listDel,
  virtualEdit,
  swithChange
} from '@/api/plusMange'
import commonFn from '@/utils/common'
export default {
  filters: {
    checkType(e) {
      switch (e) {
        // case 0:
        //     return "待审核";
        //     break;
        case 1:
          return '审核中'
          break
        case 2:
          return '审核未通过'
          break
        case 3:
          return '审核通过'
          break
        default:
          // return "暂无";
          break
      }
    },
    // 时间戳转化
    dateFilter(e) {
      if (e != 0) {
        return new Date(Number(e) * 1000).format('yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    },
    vTopFilter(e) {
      switch (e) {
        case 0:
          return '否'
          break
        case 1:
          return '是'
          break
        default:
          break
      }
    }
  },
  data() {
    return {
      form: {
        card_name: '',
        shop_name: '',
        check_status: '',
        is_jxsapp_show: '',
        page: 1,
        size: 10
      },
      // 状态下拉选
      reviewStatusList: [
        { name: '全部', value: '' },
        // { name: "待审核", value: 0 },
        { name: '审核中', value: 1 },
        { name: '审核未通过', value: 2 },
        { name: '审核通过', value: 3 }
      ],
      showList: [
        { name: '全部', value: '' },
        { name: '是', value: 1 },
        { name: '否', value: 0 }
      ],
      tableLoading: true,
      dialogFormVisible: false,

      // radio: "1",
      form1: {
        check_msg: '',
        opt: '',
        id: ''
      },
      rules1: {
        opt: [{ required: true, message: '请选择审核状态' }],
        check_msg: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 100,
            message: '最多10个字符',
            trigger: 'blur'
          }
        ]
      },
      // type: "",
      tableData: [],
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 60 // 总条目数,
    }
  },
  inject: ['reload'],
  created() {
    this.getList(this.form)
  },
  methods: {
    // 路由跳转
    toRoutes(e, id, types) {
      const route = { name: e, query: { id: id, types: types }}
      this.$router.push(route)
    },
    getList(e) {
      checkList(e)
        .then(res => {
          if (res.data.code == 200) {
            const resData = res.data.data
            this.tableData = resData
            this.page_totals = res.data.meta.total
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
          this.tableLoading = false
        })
        .catch(err => {
          this.errorStatus(err.msg)
          this.tableLoading = false
        })
    },
    // 驳回信息
    handleReason(e, msg) {
      if (!msg) {
        msg = '暂无'
      }
      this.$confirm(msg, '驳回理由', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // this.$message({
          //     type: "success",
          //     message: "删除成功!"
          // });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // switch开关
    changeSwitch(id, opt) {
      const datas = { id, opt }
      swithChange(datas)
        .then(res => {
          if (res.data.code == 200) {
            // console.log(999, res.data.data);
            // this.reload();
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 查询
    handleSearch() {
      this.form.page = 1
      this.getList(this.form)
    },
    // 审核
    handleAudit(id) {
      this.dialogFormVisible = true
      this.form1.id = id
    },
    // 审核弹窗确定
    sure(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          cardCheck(this.form1)
            .then(res => {
              // console.log(res)
              if (res.data.code == 200) {
                this.reload()
                this.succStatus('提交成功')
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'warning'
                })
              }
            })
            .catch(err => {
              // console.log(err)
              this.errorStatus(err.msg)
            })
        } else {
          this.$message({
            message: '基础信息有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 置顶
    // handleTop(id, opt) {
    //     // 1置顶
    //     const datas = { id, opt };
    //     this.isTop(datas);
    // },
    // isTop(e) {
    //     isOnTop(e)
    //         .then(res => {
    //             if (res.data.code == 200) {
    //                 // console.log(res)
    //                 this.reload();
    //                 this.succStatus("状态修改成功");
    //             } else {
    //                 this.$message({
    //                     showClose: true,
    //                     message: res.data.msg,
    //                     type: "warning"
    //                 });
    //             }
    //         })
    //         .catch(err => {
    //             this.errorStatus(err.msg);
    //         });
    // },
    // 上下架
    handleShelves(id, opt, e) {
      const datas = { id, opt }
      if (opt == 0) {
        // 下架
        this.$confirm('您正在下架' + e + 'PLUS会员卡?', '下架提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.changeStatus(datas)
            this.$message({
              type: 'success',
              message: '状态修改成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      } else if (opt == 1) {
        this.$confirm('确认上架该会员卡?', '上架提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.changeStatus(datas)
            // this.$message({
            //     type: "success",
            //     message: "状态修改成功!"
            // });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    },
    changeStatus(e) {
      dealers(e)
        .then(res => {
          if (res.data.code == 200) {
            this.reload()
            this.succStatus('状态修改成功')
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 导出
    handleExport() {
      cardExport({
        card_name: this.form.card_name,
        shop_name: this.form.shop_name,
        check_status: this.form.check_status
      })
        .then(res => {
          commonFn.downFile('plus会员卡列表', res)
        })
        .catch(err => {
          this.errorStatus(err.msg)
        })
    },
    // 自营删除
    handleDelete(e) {
      const datas = { id: e }
      this.$confirm('此操作将会删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          listDel(datas)
            .then(res => {
              if (res.data.code == 200) {
                this.reload()
                this.succStatus('删除成功')
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'warning'
                })
              }
            })
            .catch(err => {
              this.errorStatus(err.msg)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 虚拟销量
    handleNum(e, f, id) {
      const datas = { id, fake_sale_num: e }
      const reg = /^\d{1,}$/
      if (reg.test(e) && e >= Number(f)) {
        virtualEdit(datas)
          .then(res => {
            if (res.data.code == 200) {
              this.reload()
              this.succStatus('销量修改成功')
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
          .catch(err => {
            this.errorStatus(err.msg)
          })
      } else {
        this.getList(this.form)
        this.$message({
          showClose: true,
          message: '请输入正确的数字并且大于实际销量',
          type: 'warning'
        })
      }
    },
    // 每页显示条数
    handleSizeChange(val) {
      this.form.size = val
      this.getList(this.form)
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val
      this.getList(this.form)
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.tex_center {
    text-align: center;
}
.mr_30 {
    margin-right: 30px;
}
.min_width {
    /* min-width: 50px; */
    max-width: 100px;
}
.alignRight {
    text-align: right;
}
</style>
